<template>
  <div v-for="(value, key) in cate" :key="key">
    <div class="category">
      <span class="title">{{ arr[key] }}</span>
      <div class="cates">
        <el-checkbox :disabled="isCate" v-model="checks[key]" :label="true" @change="onChange(key)">全选</el-checkbox>
        <el-checkbox-group :disabled="isCate" v-model="cateData.form.selected" @change="onCateChange(key)">
          <el-checkbox class="cateItems" v-for="item in value" :label="item.apparatusCategoryId" :key="item.apparatusCategoryId"> {{ item.apparatusCategoryName }} </el-checkbox>
        </el-checkbox-group>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, watch } from 'vue'
import api from '@/api'

const props = defineProps(['cates', 'isCate'])
const emit = defineEmits(['complete'])

const arr = {
  first: 'I类医疗器械',
  second: 'II类医疗器械',
  third: 'III类医疗器械'
}

watch(
  () => props.cates,
  (val) => {
    if (val) {
      cateData.form.selected = [...val]
    } else {
      cateData.form.selected = []
    }
  }
)

const cate = ref()
const checks = ref({})

const cateData = reactive({
  form: {}
})

const loadData = async () => {
  let { data, err } = await api.get('/medinstrument/site/customer/getApparatusCategory')
  if (err) {
    ElMessage.error(err)
  } else {
    let nData = {}
    Object.keys(data)
      .sort()
      .forEach((e) => {
        checks.value[e] = false
        nData[e] = data[e]
      })

    cate.value = nData
  }
}

const onChange = (key) => {
  const checked = checks.value[key]
  const cateIdsWithKey = cate.value[key].map((e) => e.apparatusCategoryId)
  if (checked) {
    const set = new Set([...cateData.form.selected, ...cateIdsWithKey])
    cateData.form.selected = Array.from(set)
  } else {
    const newSelected = []
    cateData.form.selected.forEach((e) => {
      if (!cateIdsWithKey.includes(e)) {
        newSelected.push(e)
      }
    })
    cateData.form.selected = newSelected
  }

  trigger()
}

const onCateChange = (key) => {
  const cateIdsWithKey = cate.value[key].map((e) => e.apparatusCategoryId)
  let hasAll = true
  cateIdsWithKey.forEach((e) => {
    if (!cateData.form.selected.includes(e)) {
      hasAll = false
    }
  })
  checks.value[key] = hasAll

  trigger()
}

const trigger = () => {
  emit('complete', [...cateData.form.selected])
}

onMounted(() => {
  loadData()
})
</script>
<style scoped lang="scss">
.category {
  display: flex;
  align-items: center;

  .title {
    display: inline-block;
    width: 90px;
    height: 20px;
    line-height: 20px;
    margin-right: 25px;
  }

  .cates {
    flex: 1;
    width: 100%;
    padding: 20px 0;
    border-bottom: 1px dashed rgba(220, 223, 230, 1);

    .cateItems {
      width: 250px;

      :deep(.el-checkbox__label) {
        text-overflow: ellipsis;
        overflow: hidden;
      }

      &.is-checked {
        :deep(.el-checkbox__label) {
          color: var(--color-primary);
        }

        :deep(.el-checkbox__inner),
        :deep(.el-checkbox__inner) {
          background-color: var(--color-primary);
          border-color: var(--color-primary);
        }

        :deep(.el-checkbox__inner)::after {
          border-color: #fff;
        }
      }
    }
  }
}
</style>
